<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="http://chances.com.cn/jsp/epgutils" prefix="epgutils"%>
<%
	String rcPath = request.getContextPath() + "/remote/images";
	request.setAttribute("rcPath", rcPath);
	request.setAttribute("commonPath", request.getContextPath() + "/sites/weixin");
%>
<script type="text/javascript" src="<%=request.getContextPath() %>/remote/js/rc_js.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
var mImgPath = "${rcPath}";
stbCtrl.paths.ctrlUrl = playCtrlUrl+"?userId=${EPG_USER_SESSION.userId}";


function startRecord_ctrl(){
	console.log("startRecord:")
	
	document.getElementById("stopRecord_ctrl").style.display= "block";

    //appendText("开始录音");
    wx.startRecord();

     wx.onVoiceRecordEnd({
	     // 录音时间超过一分钟没有停止的时候会执行 complete 回调
	     complete: function (res) {
		   	 document.getElementById("stopRecord_ctrl").style.display= "none";
		     var localId = res.localId;
		     handleLocalId(localId);
	     }
     });

}
function stopRecord_ctrl(){
    //appendText("停止录音");
    document.getElementById("stopRecord_ctrl").style.display= "none";
    
    wx.stopRecord({
        success: function (res) {
            var localId = res.localId;
            handleLocalId_ctrl(localId);
        }
    });
}

function handleLocalId_ctrl(localId){
    //appendText("获取localId");

    wx.translateVoice({
        localId: localId, // 需要识别的音频的本地Id，由录音相关接口获得
        isShowProgressTips: 1, // 默认为1，显示进度提示
        success: function (res) {
            // alert(res.translateResult); // 语音识别的结果
            let text = res.translateResult;
            handleText_ctrl(text);
        }
     });
}


function handleText_ctrl(text){
    console.log("语音文本："+text);
    // let divText = document.getElementById("text");
    // divText.innerHTML = divText.innerText+"语音文件："+text;
    //appendText("语音文本："+text);
    if(text){
	    text = text.replace("。","");
	    text = $.trim(text);
	    getAnalysisResult(text);
    }else{
    	alert("请再说一次");
    }
}

function getAnalysisResult(text) {
	//text = "我想看刘德华的电影";
	var data = {
		"query" : text,
		"city" : "北京",
		"category" : "movie",
		"appid" : "${appId}",
		"uid" : ""
	}
	
	$.ajax({
		url : "${_contextPath}/wechat/proxy.wx?url="+encodeURIComponent("https://api.weixin.qq.com/semantic/semproxy/search")+"&access_token=${token}",
		type : "post",
		data : JSON.stringify(data),
		processData: false,
              contentType: 'application/json',
		success : function(data) {
			console.log(data);
			document.getElementById("stopRecord_ctrl").style.display= "none";
			if(data.errcode == 0){
				if(data.semantic.details.answer){
					gotoPage('${searchUrl}&yuyin='+data.semantic.details.answer,this,1)				
				}else{
					alert("未提取到关键字！请再试一次！");						
				}
			}else{

				alert("未提取到关键字！请再试一次！");		
			}
		},
		error: function(data){
			alert("调用失败")
		}
	});
}


function appendText(text) {
	let divText = document.getElementById("text");
	divText.innerHTML = divText.innerText + "<br/>" + text
}


</script>


<style>
/* #remoteCtrl div{
	position: relative;
} */

#min_rc {
	position: relative;
	background-image: url('${rcPath}/bg.png');
	width:50%;
	height:50%;
	margin-bottom: 20%;
	margin-left: 25%;
	margin-top: 25%;
}

.rc_btn {
	position: absolute;
	width: 310px;
	height: 310px;
	margin-left: 100px;
	margin-top: 100px;
}

#rc_min_bg {
	background-image: url('images/rc-min-bg.png');
}

#rc_btn_left {
	background-image: url('images/btn-left-s.png');
	display: none;
}

#rc_btn_rigth {
	background-image: url('images/btn-right-s.png');
	display: none;
}

#rc_btn_up {
	background-image: url('images/btn-up-s.png');
	display: none;
}

#rc_btn_down {
	background-image: url('images/btn-down-s.png');
	display: none;
}

#rc_btn_ok {
	background-image: url('images/btn-ok-s.png');
	display: none;
}

#rc_btn_close {
	width: 82px;
	height: 82px;
	left: 440px;
	top: 0px;
	background-image: url('images/btn-close.png');
}

#rc_btn_vol1 {
	top: 400px;
	left: 50px;
	background-image: url('images/btn-vol-.png');
}

#rc_btn_vol2 {
	top: 480px;
	left: 50px;
	background-image: url('images/btn-vol+.png');
}

#rc_btn_stop {
	top: 400px;
	left: 380px;
	background-image: url('images/btn-stop.png');
}

#rc_btn_return {
	top: 480px;
	left: 380px;
	background-image: url('images/btn-return.png');
}

#rc_btn_full {
	top: 480px;
	left: 170px;
	width: 175px;
	background-image: url('images/btn-full.png');
}
</style>
<style>
.min_rc {
	width:69.3%;
	margin-bottom: 50%;
	margin-left:15%;
	/* text-align:-webkit-center; */
}

.rc_btn_close {
	margin-bottom: 122.4%;
	margin-left:74%;
}

.rc_min_bg {
	width:41.3%;
	margin-bottom: 82%;
	margin-left:28.8%;
}

.rc_icon {
	width:11.2%;
}

.rc_btn_vol_down {
	margin-bottom: 70%;
	margin-left:22%;
}

.rc_btn_vol_up {
	margin-bottom: 57%;
	margin-left:22%;
}

.rc_btn_full {
	width:23.3%;
	margin-bottom: 57%;
	margin-left:38%;
}

.rc_btn_stop {
	margin-bottom: 70%;
	margin-left:66%;
}

.rc_btn_back {
	margin-bottom: 57%;
	margin-left:66%;
}

#left-triangle {
	width:50px;
	height:50px;
	border-right: 50px solid transparent;
	border-top: 50px solid transparent;
	z-index:99999;
	margin-bottom: 96%;
	margin-left:28%;
}

#circle {
	width:50px;
	height:50px;
	border-right: 50px solid transparent;
	border-top: 50px solid transparent;
	z-index:99999;
	margin-bottom: 96%;
	margin-left:43%;
}

#right-triangle {
	width:50px;
	height:50px;
	border-right: 50px solid transparent;
	border-top: 50px solid transparent;
	z-index:99999;
	margin-bottom: 96%;
	margin-left:57%;
}

#up-triangle {
	width:50px;
	height:50px;
	border-right: 50px solid transparent;
	border-top: 50px solid transparent;
	z-index:99999;
	margin-bottom: 110%;
	margin-left:43%;
}

#down-triangle {
	width:50px;
	height:50px;
	border-right: 50px solid transparent;
	border-top: 50px solid transparent;
	z-index:99999;
	margin-bottom: 82%;
	margin-left:43%;
}
</style>

<div class="navbar-fixed-bottom" style="width:100%;height:100%;" 
	 onclick="javascript:void(0)"></div>

<!-- panel bg -->
<div class="navbar-fixed-bottom min_rc">
	<img src="${rcPath}/bg.png" width="100%" height="100%"/>
</div>


<!-- panel close btn -->
<div class="navbar-fixed-bottom rc_btn_close rc_icon">
	<img src="${rcPath}/btn-close.png" width="100%" height="100%" onclick="remoteCtrlDialog.close();"/>
</div>

<!-- panel up down left right ok btn -->
<div class="navbar-fixed-bottom rc_min_bg">
	<img id="rc-min-bg" src="${rcPath}/rc-min-bg.png" width="100%" height="100%"/>
</div>

<div id='left-triangle' class="navbar-fixed-bottom" 
	 onclick="imageObj.cPanelImg('rc-min-bg','left-triangle',mImgPath,'rc.left()');"></div>
<div id="circle" class="navbar-fixed-bottom" 
	 onclick="imageObj.cPanelImg('rc-min-bg','circle',mImgPath,'rc.enter()');"></div>
<div id="right-triangle" class="navbar-fixed-bottom" 
	 onclick="imageObj.cPanelImg('rc-min-bg','right-triangle',mImgPath,'rc.right()');"></div>
<div id='up-triangle' class="navbar-fixed-bottom" 
	 onclick="imageObj.cPanelImg('rc-min-bg','up-triangle',mImgPath,'rc.up()');"></div>
<div id="down-triangle" class="navbar-fixed-bottom" 
	 onclick="imageObj.cPanelImg('rc-min-bg','down-triangle',mImgPath,'rc.down()');"></div>

<!-- panel vol- -->
<div class="navbar-fixed-bottom rc_btn_vol_down rc_icon">
	<img id="btn-vol-" src="${rcPath}/btn-vol-.png" width="100%" height="100%" 
		 onclick="imageObj.cImg('btn-vol-',mImgPath,'rc.volDown()');"/>
</div>

<!-- panel vol+ -->
<div class="navbar-fixed-bottom rc_btn_vol_up rc_icon">
	<img id="btn-vol-add" src="${rcPath}/btn-vol-add.png" width="100%" height="100%" 
		 onclick="imageObj.cImg('btn-vol-add',mImgPath,'rc.volUp()');"/>
</div>

<!-- panel full -->
<div class="navbar-fixed-bottom rc_btn_full" align="center">
	<%-- <img src="${rcPath}/btn-full.png" width="100%" height="100%" onclick="remoteCtrlDialog.full();"/> --%>
	
	<span onclick="startRecord_ctrl()" style="color:white; width:100%;height:100%; font-size: 2em" class="glyphicon glyphicon-ice-lolly"></span>
</div>

<div  class="navbar-fixed-top" id="stopRecord_ctrl" style="display:none;z-index:999999999999999999999999999999999999999">
	<div  class="navbar-fixed-top" id="speak" style="opacity: 0.5; width:100%;height:100%;margin-top:3.5em;background-color: #000">
	</div>
	<div class="navbar-fixed-top" style="left:25%;top:30%; width:50%;height:10%; text-align: center;opacity: false; background: white" >
		<input style="width:100%;height:100%;" type="button" value="结束录音" onclick="stopRecord_ctrl()" />
	</div>
</div>

<!-- panel resume -->
<div class="navbar-fixed-bottom rc_btn_stop rc_icon">
	<img id="btn-stop" src="${rcPath}/btn-stop.png" width="100%" height="100%" 
		 onclick="imageObj.cImg('btn-stop',mImgPath,'rc.resumeOrPause()');"/>
</div>

<!-- panel back -->
<div class="navbar-fixed-bottom rc_btn_back rc_icon">
	<img id="btn-return" src="${rcPath}/btn-return.png" width="100%" height="100%" 
		 onclick="imageObj.cImg('btn-return',mImgPath,'rc.back()');"/>
</div>
